<template>
    <div class="out-container">
        <m-header :title="title"></m-header>
        <div class="container">
            <div class="order-list">
                <div class="order-item" v-for="order in orders">
                    <div class="name">{{order.book_name}}</div>
                    <div class="price">￥{{order.book_price*order.order_num}}</div>
                    <div class="num-change">
                        <i class="fa fa-chevron-left" @click.stop="removeFromCart(order)"></i>
                        <span v-html="order.order_num"></span>
                        <i class="fa fa-chevron-right" @click.stop="addToCart(order)"></i>
                    </div>
                </div>
            </div>
            
            <div class="money">
                <div class="total">总价：{{totalMoney}}</div>
                <cube-button :primary="true" class="pay" @click="_buyBook">支付</cube-button>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import MHeader from "base/m-header/m-header";
import { mapGetters, mapActions } from "vuex";

import { buyBook } from "api/api";

export default {
  data() {
    return {
      title: "购物清单"
    };
  },
  computed: {
    ...mapGetters(["orders"]),
    totalMoney() {
      let total = 0;
      this.orders.forEach((item, index) => {
        total += item.book_price * item.order_num;
      });
      return total;
    }
  },
  methods: {
    ...mapActions(["saveUserOrder", "deleteUserOrder"]),
    // 添加到购物车
    addToCart(book) {
      var order = Object.assign(
        {},
        {
          book_id: book.book_id,
          book_name: book.book_name,
          book_type: book.book_type,
          book_typeName: book.book_typeName,
          book_price: book.book_price
        }
      );

      this.saveUserOrder(order);
    },
    // 移出购物车
    removeFromCart(book) {
      this.deleteUserOrder(book);
    },
    _buyBook() {
        buyBook().then(res=>{
            console.log(res)
        })
    }
  },
  components: {
    MHeader
  }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixins';

.out-container {
    .container {
        position: absolute;
        top: 44px;
        bottom: 55px;
        width: 100%;
        background: #fff;

        .order-list {
            border-bottom: 1px solid #f1f1f1;

            .order-item {
                font-size: 14px;
                text-align: left;
                display: flex;
                padding: 10px 15px;
                border-top: 1px solid #f1f1f1;

                .name {
                    width: 60%;
                    ellipsis();
                    margin-right: 10px;
                }

                .price {
                    flex: 1;
                }

                .num-change {
                    i {
                    }

                    span {
                    }
                }
            }
        }

        .money {
            display: flex;
            margin-top: 20px;
            align-items: center;
            text-align: left;
            padding: 0 15px;

            .total {
                width: 65%;
            }

            .pay {
                flex: 1;
            }
        }
    }
}
</style>